<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部卡片 -->
      <el-card class="box-card">
        <el-row class="text item" type="flex" justify="space-between" align="middle">
          <el-col>
            <div class="before">
              <i class="el-icon-info" /><span>本月：社保在缴 公积金在缴 增员 减员 入职 离职</span>
            </div>
          </el-col>
          <el-col>
            <el-row type="flex" justify="end">
              <el-button size="mini" type="danger" @click="$router.push('/social/historicalArchiving')">历史归档</el-button>
              <el-button size="mini" type="primary" @click="$router.push(`/social/monthStatement?yearMonth=${yearMonth}`)">{{ yearMonth }}月报表</el-button>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="padTop">
          <strong class="strong">部门:</strong>
          <el-checkbox-group v-model="departmentChecks" @change="change">
            <el-checkbox v-for="item in departmentList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-row>
        <el-row type="flex" align="middle" class="padTop">
          <strong class="strong">社保城市 : </strong>
          <el-checkbox-group v-model="socialSecurityChecks" @change="change">
            <el-checkbox v-for="cityitem in cityList" :key="cityitem.id" :label="cityitem.id">{{ cityitem.name }}</el-checkbox>
          </el-checkbox-group>
        </el-row>
        <el-row type="flex" align="middle" class="padTop">
          <strong class="strong">公积金城市 : </strong>
          <el-checkbox-group v-model="providentFundChecks" @change="change">
            <el-checkbox v-for="cityitem in cityList" :key="cityitem.id" :label="cityitem.id">{{ cityitem.name }}</el-checkbox>
          </el-checkbox-group>
        </el-row>
      </el-card>
      <!-- 放置表格和分页 -->
      <el-card>
        <el-table :data="list" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}" @row-click="details">
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="username" label="姓名" sortable />
          <el-table-column prop="mobile" label="手机" sortable />
          <el-table-column prop="workNumber" label="工号" sortable />
          <el-table-column prop="departmentName" label="部门" sortable />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable />
          <el-table-column prop="leaveTime" label="离职时间" sortable />
          <el-table-column prop="participatingInTheCity" label="社保城市" />
          <el-table-column prop="providentFundCity" label="公积金城市" />
          <el-table-column prop="socialSecurityBase" label="社保基数" />
          <el-table-column prop="providentFundBase" label="公积金基数" />
          <!-- <el-table-column label="操作">
            <template v-slot:default="obj">
              <el-button type="text" size="mini" @click="$router.push(`/social_securitys/detail/${obj.row.id}`)">查看详情</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="middle" style="height:60px">
          <el-pagination
            :current-page="1"
            :page-sizes="[10, 20, 30, 50]"
            background
            :page-size="page.pagesize"
            :total="page.total"
            layout=" sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'
import { getSocialList, getSettings, getCityList } from '@/api/social'
export default {
  data() {
    return {
      yearMonth: '',
      departmentChecks: [], // 部门选中的列表
      departmentList: [], // 所有部门列表
      socialSecurityChecks: [], // 社保城市列表
      providentFundChecks: [], // 公积金城市列表
      list: [], // 表格内容对应的对象数组
      cityList: [], // 获取城市列表
      page: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created() {
    // 获取部门列表
    this.getDepartments()
    // 获取企业用户社保列表
    this.getSocialList()
    // 获取企业社保配置信息
    this.getSettings()
    // 获取城市列表
    this.getCityList()
  },
  methods: {
    // 获取城市列表
    async getCityList() {
      this.cityList = await getCityList()
      // console.log(this.cityList)
    },
    async getSettings() {
      const { dataMonth } = await getSettings()
      this.yearMonth = dataMonth
      // console.log(this.yearMonth)
    },
    async getDepartments() {
      const { depts } = await getDepartments()
      this.departmentList = depts
      // console.log(this.departmentList)
    },
    async getSocialList() {
      const { rows, total } = await getSocialList(
        {
          ...this.page,
          departmentChecks: this.departmentChecks,
          socialSecurityChecks: this.socialSecurityChecks,
          providentFundChecks: this.providentFundChecks
        }
      )
      this.list = rows
      // console.log(this.list)
      this.page.total = total
    },
    handleSizeChange(newSize) {
      // 1.修改每页条数
      this.page.pageSize = newSize
      // 2.发送请求
      this.getSocialList()
    },
    handleCurrentChange(newPage) {
      // 1. 修改翻页配置
      this.page.page = newPage
      // 发送请求
      this.getSocialList()
    },
    // 社保详情路由跳转
    details(row, column, event) {
      console.log(row, column, event)

      this.$router.push('/detail/' + row.id)
    },
    // 当复选框出现变化,就调用此函数,重新渲染数据
    change() {
      /* 需要先把page.page初始化 */
      this.page.page = 1
      this.getSocialList()
    }
  }
}
</script>

<style lang='scss'>
  .box-card{
    margin-bottom: 20px;
  }
  .text {
    font-size: 14px;
  }
  .box-card {
    width: 100%;
  }
  .before {
    line-height: 28px;
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
    i {
      margin-right: 5px;
      color: #409eff;
    }
  }
  .padTop{
    padding-top: 20px;
    .strong {
      margin-right: 10px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
    }
  }
</style>
